<template>
  <view
    @click.stop="off"
    class="comment"
    @mousewheel.prevent
    @touchmove.stop.prevent
    catchtouchmove="return"
    :class="value == true ? 'showcomment' : ''"
  >
    <view
      @click.stop
      :class="value == true ? 'com-list showcomlist' : 'com-list'"
      @touchmove.stop.prevent
      catchtouchmove="true"
    >
      <view class="title">
        <text>评论</text>
        <text>{{ discussList.length }}</text>
      </view>
      <scroll-view
        :scroll-y="true"
        class="list_banner"
        @scrolltolower="scrollBottom"
      >
        <!-- 列表主体 -->
        <view
          class="listData"
          @touchmove.prevent
          catchtouchmove="true"
          v-for="(item, index) in discussList"
          :key="index"
          @click.stop="replayPerson(item)"
        >
          <image :src="item.avatar" mode="widthFix" class="header" />

          <view class="right_con" :class="havere == false ? 'bor-bt' : ''">
            <!-- 时间和人 -->
            <view class="person">
              <view class="person_title">
                <text class="person_title_f">{{ item.userName }}</text>
                <!-- <image
                  src="../static/img/aixin_k.png"
                  mode="widthFix"
                  class="dianzan"
                /> -->
              </view>
              <view class="dz">
                <text class="person_title_l">{{ item.addTimes }}</text>
                <text>{{ item.praise }}</text>
              </view>
            </view>
            <!-- 评论列表 -->
            <view class="list_cen">
              <!-- 第一层回复 -->
              <view class="list_cen_fir" @click.stop="replayPerson(item)">
                <text class="list_cen_fir_text">{{ item.intro }}</text>
                <image
                  :src="item.images[0].fileUrl"
                  mode="widthFix"
                  class="list_cen_fir_img"
                  v-if="item.images && item.images[0] && item.images[0].fileUrl"
                />
              </view>
              <view
                class="hasreplayMsg"
                v-if="item.replyCount != 0"
                @click.self.stop="jumpReplayPage(item)"
                >共{{ item.replyCount }}条回复></view
              >
              <block v-if="item.replys && item.replys.length != 0">
                <!-- //还有回复 -->
                <view
                  class="list_cen_sec"
                  @click.stop.self="replayPerson(second)"
                  v-for="(second, index) in item"
                  :key="index"
                >
                  <image
                    :src="second.avatar"
                    mode="widthFix"
                    class="list_cen_sec_header"
                  />
                  <view class="list_cen_sec_right">
                    <text class="list_cen_sec_right_text">{{
                      second.userName
                    }}</text>
                    <view class="list_cen_sec_right_bo">
                      <view class="list_cen_sec_right_box">
                        <text class="list_cen_sec_right_bo_text">{{
                          second.intro
                        }}</text>
                        <text>{{ sencod.addTime }}</text>
                      </view>
                      <view class="person_dz">
                        <image
                          src="../static/img/aixin_k.png"
                          mode="widthFix"
                          class="dianzan"
                        />
                      </view>
                    </view>
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>

        <!-- 底部数据为空提示 -->
        <view class="floor" v-if="!hasChart">
          <view></view>
          <text>没有更多了</text>
          <view></view>
        </view>
        <view :style="'height:' + (120 + AllSC) + 'rpx;'"></view>
      </scroll-view>

      <view
        class="bottom_inp"
        @click.stop="clearAll"
        :class="startfocus == true ? 'inputmask' : ''"
      >
        <view
          :style="[
            { paddingBottom: AllSC + 'rpx' },
            { paddingTop: AllSC + 'rpx' },
            { bottom: keyboardHeighte + 'px' },
          ]"
          @click.stop
        >
          <input
            type="text"
            :placeholder="holdMsg || '说点什么'"
            cursor-spacing="300"
            @click="startinput"
            v-model="text"
            :focus="startfocus"
            confirm-type="done"
            :adjust-position="false"
            @focus="getinputHeight"
            @blur="blueIn"
          />
          <button @click="submiteChart">发送</button>
        </view>
      </view>
    </view>

    <view style="height: 100rpx;"></view>
     <Prompt v-model="authSwitch"></Prompt>
  </view>
</template>

<script>
import { userTalk, replyMsg } from "../api/api";
export default {
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Boolean,
      default: () => false,
    },
    AllSC: {
      type: Number,
      default: 0,
    },
    discussList: {
      type: Array,
      default: [],
    }, //评论的数据
    hasChart: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      startfocus: false,
      openItem: "",
      holdMsg: "",
      text: "",
      keyboardHeighte: "",
    };
  },
  watch: {
    value: function (newvalue) {
      this.text = false;
    },
    startfocus: function (value) {
      if (value == false) {
        this.keyboardHeighte = 0;
      }
    },
    openItem: function (value) {
      console.log(value);
    },
  },
  methods: {
    blueIn() {
      this.keyboardHeighte = 0;
    },
    off() {
      this.$emit("input", false);
    },
    startinput(e) {
      this.startfocus = true;
    },
    sendmessage() {
      //真实输入框发送的时间
    },
    openUploadimg() {
      // uni.chooseImage({
      //   count: 1,
      //   sizeType: "compressed",
      //   success: (file) => {
      //     console.log(file);
      //   },
      // });
      //   uni.uploadFile({
      //     url: "",
      //   });
    },
    getinputHeight(e) {
      this.keyboardHeighte = e.detail.height;
    },
    scrollBottom() {
      this.$emit("scrollBottom");
    },
    replayPerson(data = "") {
      // this.$emit("replayItem", data);
      this.startfocus = true;
      this.text = "";
      this.openItem = data;
      this.holdMsg = "回复:" + data.userName;
    },
    async submiteChart() {
      if (!this.AuthState()) return;
      console.log(this.openItem);
      if (this.openItem == "") {
        // 不是回复
        let res = await userTalk(this.$parent.id, this.text);
        if (res[1].data.code == "000000") {
          uni.showToast({
            title: "评论成功，等待审核",
            duration: 1500,
            icon: "none",
          });
          //数据刷新重置
          this.flashDis();
        } else {
          uni.showToast({
            duration: 1500,
            title: "评论失败",
            icon: "none",
          });
        }
      } else {
        let res = await replyMsg(this.openItem.id, this.text);
        if (res[1].data.code == "000000") {
          uni.showToast({
            title: "评论成功",
            duration: 1000,
            icon: "none",
          });
          //数据刷新重置
          this.flashDis();
        } else {
          uni.showToast({
            duration: 1000,
            title: "评论失败",
            icon: "none",
          });
        }
      }
    },
    //刷新数据
    flashDis() {
      this.clearAll();
      this.$parent.index = 0;
      this.$parent.discussList = [];
      this.$parent.hasChart = true;
      this.$parent.getcomData();
    },
    //关闭
    clearAll() {
      this.startfocus = false;
      this.text = "";
      this.holdMsg = "";
      this.openItem = "";
    },
    stopMover(e) {
      e.preventDefault();
    },
    //跳转到评论详情页面
    jumpReplayPage(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/discuss/discuss?id=" + item.id,
      });
    },
  },
};
</script>

<style scoped lang="scss" scoped>
.comment {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 1;
  opacity: 0;
  outline: 0;
  transition: all 0.3s;
  pointer-events: none;
  overflow: hidden;
  &.showcomment {
    z-index: 150;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.3s;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    height: 1300%;
  }

  .com-list {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 80%;
    width: 100%;
    z-index: 999999;
    background-color: #ffffff;
    margin-bottom: -1000rpx;
    transition: all 0.3s;
    overflow: hidden;

    .title {
      position: relative;
      width: 100vw;
      padding: 37rpx 40rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      vertical-align: middle;
      font-weight: bold;
      color: rgba(36, 36, 36, 1);
      display: table-cell;
      /*按照单元格的样式显示元素*/
      vertical-align: bottom;
      letter-spacing: 4rpx;
      /*底对齐*/
      &::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: rgba(232, 232, 232, 1);
        transform: scaleY(0.5);
      }
    }

    .listData {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding-top: 40rpx;
      padding-left: 40rpx;

      .header {
        width: 77rpx;
        height: 77rpx;
        background-color: red;
        flex-shrink: 0;
        border-radius: 50%;
      }

      .right_con {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin-left: 23rpx;
        padding-bottom: 32rpx;
        position: relative;
        &::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: rgba(232, 232, 232, 1);
          transform: scaleY(0.5);
        }
        .person {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .person_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding-right: 35rpx;

            > image {
              width: 30rpx;
            }

            .person_title_f {
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(117, 117, 117, 1);
            }
          }

          .dz {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding-right: 44rpx;
            padding-top: 16rpx;
            .person_title_l {
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(117, 117, 117, 1);
            }
          }
        }

        .list_cen {
          padding-top: 31rpx;
          width: 100%;

          .list_cen_fir {
            .list_cen_fir_text {
              height: 25rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(36, 36, 36, 1);
              line-height: 38rpx;
            }

            .list_cen_fir_img {
              width: 252rpx;
              min-height: 252rpx;
              background-color: coral;
              border-radius: 16rpx;
            }
          }

          .list_cen_sec {
            padding-top: 30rpx;
            display: flex;
            justify-content: flex-start;
            width: 100%;

            .list_cen_sec_header {
              width: 44rpx;
              height: 44rpx;
              flex-shrink: 0;
              background-color: coral;
              border-radius: 50%;
            }

            .list_cen_sec_right {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-between;
              margin-left: 23rpx;
              width: 100%;

              //   margin-top: 7rpx;
              .list_cen_sec_right_text {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(117, 117, 117, 1);
              }

              .list_cen_sec_right_bo {
                margin-top: 20rpx;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .list_cen_sec_right_box {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                }

                .list_cen_sec_right_bo_text {
                  font-size: 26rpx;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: rgba(36, 36, 36, 1);
                }
              }
            }
          }
        }
      }
    }

    .floor {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;

      > view {
        width: 60rpx;
        height: 2rpx;
        background: rgba(232, 232, 232, 1);
      }

      > text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(161, 160, 160, 1);
        display: inline-block;
        padding: 0 20rpx;
      }
    }
  }

  .bottom_inp {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 22rpx 0;
    width: 100%;
    z-index: 3000;

    > view {
      // border-top: 2px solid rgba(232, 232, 232, 1);
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;

      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 38rpx;
      background: rgba(255, 255, 255, 1);
    }

    input {
      line-height: 65rpx;
      height: 100%;
      width: 100%;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      width: 580rpx;
      height: 65rpx;
      background: rgba(243, 243, 243, 1);
      color: rgba(151, 151, 151, 1);
      border-radius: 33rpx;
      padding-left: 40rpx;
    }

    button {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(117, 117, 117, 1);
      background-color: #ffffff;
    }
  }
}

.bor-bt {
  border-bottom: 1px solid rgba(232, 232, 232, 1);
}

.dianzan {
  width: 30rpx;
}

.person_dz {
  padding-right: 35rpx;
}

.inputmask {
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 300;
}

.showcomlist {
  margin-bottom: 0 !important;
  transition: all 0.3s;
}

.list_banner {
  height: calc(80vh - 100rpx);
}
.hasreplayMsg {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(94, 94, 94, 1);
  padding-top: 23rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
button::after {
  border: none;
}
</style>
